<template>
  <div class="login">
    <AlNavBar @onClickLeft="back" title="登录" :show-go-home="false"></AlNavBar>
    <div class="login-main">
      <h4>请登录</h4>
      <div class="login-input">
        <van-form @submit="onSubmit" ref="loginForm">
          <!--用户名-->
          <van-field
              v-model="username"
              name="username"
              placeholder="用户名登陆"
              v-if="type===1"
              :rules="[{ required: true, message: '请输入用户名' }]"
          >
            <template #left-icon><i class="iconfont icon-wode"></i></template>
          </van-field>
          <!--邮箱-->
          <van-field
              v-model="email"
              name="email"
              placeholder="邮箱登陆"
              v-if="type===2"
              :rules="[{ pattern: /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/, message: '请输入邮箱' }]"
          >
            <template #left-icon><i class="iconfont icon-mail"></i></template>
          </van-field>
          <!-- 密码 -->
          <van-field
              v-model="password"
              name="password"
              type="password"
              placeholder="请输入密码"
              :rules="[{ required: true }]"
          >
            <template #left-icon>
              <i class="iconfont icon-password"></i>
            </template>
          </van-field>

          <p class="link">
            登录即同意<span>《用户使用协议》</span>和<span>《隐私协议》</span>
          </p>
          <van-button round size="large">登录</van-button>
        </van-form>
      </div>
      <van-button round @click="changeLogin" size="mini">切换登录方式</van-button>
      <van-button round to="register" size="mini">注册</van-button>
    </div>
  </div>
</template>

<script>

import {login} from '@/api/login.js'
import {saveToken} from '@/utils/token.js'
import AlNavBar from "@/components/AlNavBar";
import {mapMutations} from 'vuex'

export default {
  name: "login",
  components: {AlNavBar},
  data() {
    return {
      username: null,
      email: null,
      password: null,
      type: 1
    }
  },
  methods: {
    ...mapMutations(['SAVE_USER_INFO', 'SET_IS_LOGIN']),
    // 提交
    onSubmit() {
      login({username: this.username, email: this.email, password: this.password}).then(res => {

        console.log("======")
        console.log(res)
        // 保存用户的token
        saveToken(res.data.jwt)
        // 保存用户信息
        this.SAVE_USER_INFO(res.data.user)
        // 将登陆状态修改为true
        this.SET_IS_LOGIN(true)
        //  判断是不是被打回到登录页
        console.log(this.$route)
        if (this.$route.query.redirect) {
          this.$router.push(`${this.$route.query.redirect}`)
        } else {
          // 正常跳转的
          this.$router.push('/home')
        }
      })
    },
    back() {
      if (this.$route.query.redirect) {
        this.$router.push('/find')
      } else {
        // 正常跳转的
        this.$router.go(-1)
      }
    },
    changeLogin() {
      this.username = null;
      this.email = null;
      this.password = null;
      if (this.type === 1) {
        this.type = 2;
      } else {
        this.type = 1;
      }
    }
  }
}
</script>

<style lang="less">
.login {
  .van-cell{
    border-radius: 15px;
  }
  .login-main {
    margin-top: 20px;
    padding: 0 15px;

    .login-input {
      margin-top: 20px;
      //padding: 0 15px;
      .get-code {
        font-size: 16px;
      }

      .link {
        font-size: 12px;
        color: @main-font-color;
        margin: 20px 0 50px 0;
      }

      span {
        color: @assist-color;
      }

      .btn {
        border-radius: 44px;

        span {
          color: @white-color;
        }
      }
    }


  }
}
</style>